<nav mat-tab-nav-bar>
  <a mat-tab-link (click)="toggleChartView('')" [active]="!activeTab">总览</a>

  <a mat-tab-link *ngFor="let room of roomList" (click)="toggleChartView(room.name)" matTooltip="{{room.name}}"
    [active]="activeTab === room.name">{{room.name | slice:-6}}</a>

  <a mat-tab-link (click)="showAddRoom()">
    +新增
  </a>
</nav>

<p-chart class="chart" [optionObservable]="optionObservable" chartHeight="550"></p-chart>

<div class="action-btn-group" *ngIf="!activeTab">
  <div class="mat-button">累计客户端：{{totalClientCount}} </div>
  <button type="button" mat-raised-button (click)="showDetail(activeTab)">详细信息</button>
</div>

<div class="action-btn-group" *ngIf="activeTab">
  <mat-button-toggle-group appearance="standard">
    <mat-button-toggle (click)="toggleChartType('pie')" [disabled]="currChartType == 'pie'">客户端占比</mat-button-toggle>
    <mat-button-toggle (click)="toggleChartType('line')" [disabled]="currChartType == 'line'">实时数据</mat-button-toggle>
    <mat-button-toggle (click)="showDetail(activeTab)">详细信息</mat-button-toggle>
    <mat-button-toggle (click)="removeRoom(activeTab)">关闭</mat-button-toggle>
  </mat-button-toggle-group>
</div>
